<template>
  <div class="sortBox">
    <div class="header">
      <el-top></el-top>
    </div>
    <!-- 表格 -->
    <div class="content">
      <el-table
        :data="list"
        style="width: 100%; margin-bottom: 20px"
        row-key="id"
        :tree-props="{ children: 'child' }"
      >
        <el-table-column prop="name,id" label="名称">
          <template slot-scope="scope">
            {{ scope.row.name }} | {{ scope.row.id }}
          </template>
        </el-table-column>
        <el-table-column prop="type" label="类型"> </el-table-column>
        <el-table-column prop="address" label="分类图标">
          <template slot-scope="scope">
            <img :src="scope.row.extra" alt="" class="img" />
          </template>
        </el-table-column>
        <el-table-column prop="sort" label="排序"> </el-table-column>
        <el-table-column prop="status" label="状态">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.status"
              active-text="上架"
              @click.native="updateState(scope.row.id)"
            >
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column prop="date" label="操作">
          <el-link type="primary" :underline="false">添加子目录</el-link>
          <el-link type="primary" :underline="false">编辑</el-link>
          <el-link type="primary" :underline="false">删除</el-link>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
// 引入组件
const Top = () => import("@/components/store/sort/Top.vue");
const Table = () => import("@/components/store/index/Table.vue");
// --------------------------
// 引入axios方法
import { treeList, UpdateState } from "@/network/api/store/sort";

export default {
  // 组件注册
  components: {
    "el-top": Top,
    "el-tables": Table,
  },
  async created() {
    let list = await treeList(-1);
    // console.log("list", list.data.data);
    list.data.data.forEach((item) => {
      item.type = "产品分类";
      if (item.child) {
        item.child.forEach((ite) => {
          ite.type = "产品分类";
        });
      }
    });
    this.list = list.data.data;
  },
  data() {
    return {
      list: [],
      type: -1,
    };
  },
  methods: {
    updateList(val, type) {
      console.log(val, type);
      this.type = type;
      this.list = [...val];
    },
    // 数据状态更新
    async updateState(id, state) {
      let { type } = this.$data;
      console.log(id);
      let res = await UpdateState(id);
      let list = await treeList(type);
      // console.log("list", list.data.data);
      list.data.data.forEach((item) => {
        item.type = "产品分类";
        if (item.child) {
          item.child.forEach((ite) => {
            ite.type = "产品分类";
          });
        }
      });
      this.list = list.data.data;
      console.log(res);
    },
  },
};
</script>

<style scoped lang="scss">
.sortBox {
  border-radius: 4px;
  border: 1px solid #e6ebf5;
  background-color: #fff;
  overflow: hidden;
  color: #303133;

  .header {
    padding: 20px;
    // border-bottom: 1px solid #e6ebf5;
  }
  .content {
    border-top: 1px solid #e6ebf5;
    padding: 20px;
  }
}
// 分类图标
.img {
  width: 30px;
  height: 30px;
}
::v-deep .el-form-item {
  width: 100% !important;
}
::v-deep .el-form-item__content {
  width: 100% !important;
  display: flex;
  justify-content: space-evenly;
}
::v-deep .cell {
  a {
    display: inline-block;
    margin-right: 10px;
    font-size: 12px;
    text-decoration: none;
  }
}
.el-table {
  font-size: 12px;
}
::v-deep .el-table thead {
  color: black;
  font-size: 14px;
}
</style>
